<template>
  <div class="account">
    <!--    手机号登录-->

    <!--背景动态图-->
    <vue-particles
        class="login-bg backBox"
        color="#a8b0e1"
        :particleOpacity="0.7"
        :particlesNumber="100"
        shapeType="circle"
        :particleSize="4"
        linesColor="#a8b0e1"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="false"
        clickMode="push"
    />


    <div class="headTop" @click="onClickLeft">
      <van-icon name="arrow-left" />
    </div>
    <h3>手机号登录</h3>
    <van-form validate-first @failed="onFailed" @submit="onSubmit">

      <div class="itemInput">
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
            class="InputDiv"
            v-model="valuePhone"
            name="pattern"
            placeholder="请输入手机号 / 暂无接口"
            :rules="[{ pattern, message: '请输入正确手机号' }]"
        />
      </div>
      <div class="itemInput">
        <div class="eyeDiv">

          <van-field
              class="InputDiv"
              v-model="valueCode"
              name="pattern"
              placeholder="请输入验证码"
              :rules="[{ required: true, message: '请输入验证码' }]"
          />
        </div>
      </div>

      <div class="defl SwitchPages">
        <router-link tag="p" to="/accountsign">账号密码登录</router-link>
        <!--        <p>收不到验证码？</p>-->
        <router-link tag="p" to="/register">去注册？</router-link>
      </div>

      <!--    <div class="buttonSign" @click="onButtonSign">登录</div>-->

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">登录</van-button>
      </div>

    </van-form>


    <!--    <div>-->
    <!--      <button @click="res">注册</button>-->
    <!--    </div>-->


  </div>
</template>

<script>
import {Toast} from "vant";
import {PhoneSignApi} from "@/api/api";


export default {
  name: "PhoneSign",
  data() {
    return {
      eyeShow: false,
      valuePhone: '',
      pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
      buttonCountFlag: false,
      buttonTextFlag: true,
      phoneNumTime: 60,
      phoneNumMeter: null,
      valueCode: '',
    }
  },
  methods: {
    onClickLeft() {
      Toast('返回');
      this.$router.go(-1)
    },
    //成功后返回值
    onSubmit(values) {
      console.log(values)
      //发送短信验证码
      Toast('暂无此接口，请期待更新');

    },
    //验证码计时器
    timerDisabledTwoEdition() {
      //显示文字发送请求
      if (this.pattern.test(this.valuePhone)) {
        if (this.buttonTextFlag) {
          PhoneSignApi(this.valuePhone).then(res => {
            console.log(res)
          })
        }
        Toast('已发送验证码');
        //数子显示文字隐藏
        this.buttonCountFlag = true
        this.buttonTextFlag = false
        // 开始计时器
        this.phoneNumMeter = setInterval(() => {
          this.phoneNumTime -= 1
          // 判断数字等于零 结束定时器 数值重新被赋值60 提示框为空 按钮可用
          if (this.phoneNumTime == 0) {
            clearInterval(this.phoneNumMeter)
            this.phoneNumTime = 60
            // 显示文字
            this.buttonTextFlag = true
            // 显示数字
            this.buttonCountFlag = false
          }
        }, 1000)


      }
    },
    //失败后返回值
    onFailed(errorInfo) {
      console.log('failed', errorInfo);
      Toast("请输入正确手机号");
    },
  },
}
</script>

<style scoped lang="less">

.account {
  padding: 0 18px;
  background-color: rgb(255,255,255);

  //背景图
  .backBox {
    position: absolute;
    background-color: rgb(255,255,255);

    //background-color: rgb(168,176,225);
    //background-color: rgb(176, 224, 230);
    //background-color: rgb(163,148,128);
    height: 100vh;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100vw;
  }

  .headTop {
    margin-top: 33px;

    i {
      font-size: 22px;
    }
  }

  h3 {
    margin-top: 33px;
    margin-bottom: 54px;
    color: #EC0D0D;
    font-size: 28px;
  }

  .itemInput:nth-child(1) {
    border-radius: 9px 9px 0 0;;
  }

  .itemInput:nth-child(2) {
    border-radius: 0 0 9px 9px;;
  }

  .itemInput {
    //margin: 16px 0;
    background-color: #F8F8F8;
    overflow: hidden;

    /deep/ .InputDiv {
      width: 100%;
      background-color: #F8F8F8;
      border: 0;
    }

    input {
      width: 100%;
      background-color: #F8F8F8;
      border: 0;
      text-indent: 18px;
      height: 50px;
      line-height: 50px;
    }

    input.inputVerification {
      width: 66%;
    }

    button.sendOut {
      background-color: #F8F8F8;
      width: 30%;
      border: 0;
      line-height: 50px;
    }

    .p {
      height: 25px;
      line-height: 25px;
      color: red;
      padding-left: 20px
    }
  }

  .SwitchPages {
    font-size: 14px;
    color: #BDBDBD;
    margin-top: 25px;
    margin-bottom: 30px;
  }

  .buttonSign {
    text-align: center;
    width: 80%;
    height: 40px;
    line-height: 40px;
    color: white;
    background-color: #FF0000;
    margin: auto;
    border-radius: 22px;
  }
}
</style>